<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>Title</title>
  <style>
    #div1 {
      margin: 200px;
      height: 20px;
      border: 1px solid;
      animation: rotate 2.5s infinite, color 2s infinite, width 3s infinite;
      animation-direction: normal, normal, alternate;
    }
    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes color {
      20% {
        background-color: #f91;
      }
      80% {
        background-color: #0ff
      }
    }
    @keyframes width {
      0% {
        width:40%;
      }
      100% {
        width: 70%;
      }
    }

    #div2 {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #0ff;
      animation: move 6s linear both;
    }
    @keyframes move {
      0% {
        transform: translate(0,0);
      }
      33% {
        transform: translate(200px,0);
      }
      66% {
        transform: translate(0,0);
      }
      100% {
        transform: translate(200px,0);
      }
    }

    #div3 {
      width: 40px;
      height: 40px;
      background: #0ff;
      animation: rotate1 2s;
    }
    @keyframes rotate1 {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    #div4 {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #0ff;
      /*animation: move1 2s linear 3 alternate both;*/
      animation-name: move1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: 3;
      animation-direction: alternate;
      animation-fill-mode: both;
      /*
      animation-name: 指定 @keyframes 动画的名称。
      animation-duration: 指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0。
      animation-timing-function: 指定动画计时函数，即动画的速度曲线，默认是 "ease"。
      animation-delay: 指定动画延迟时间，即动画何时开始，默认是 0。
      animation-iteration-count: 指定动画播放的次数，默认是 1。
      animation-direction: 指定动画播放的方向。默认是 normal。
      animation-fill-mode: 指定动画填充模式。默认是 none。
      animation-play-state: 指定动画播放状态，正在运行或暂停。默认是 running。
      */
    }
    @keyframes move1 {
      0% {
        transform: translate(0,0);
      }
      100% {
        transform: translate(200px,0);
      }
    }
    #div5 {
      height: 10px;
      border: 1px solid;
      background: linear-gradient(#0ff,#0ff) no-repeat;
      background-size:0;
      animation: move2 2s linear forwards;
    }
    @keyframes move2 {
      100% {
        background-size: 100%;
      }
    }

    #box {
      height: 100px;
      width: 100px;
      background: green;
      transition: transform 1s ease-in 1s;
    }

    #box:hover {
      transform: rotate(180deg) scale(.5, .5);
    }
  </style>
</head>
<body>
  <div id="div3"></div>
</body>
</html>
